<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
	<link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css" />
	<link rel="stylesheet" href="./css/index.css" />
	<script type="text/javascript" src="plugins/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="plugins/bootstrap/bootstrap.min.js"></script>
	<script type="text/javascript" src="plugins/jquery.singlePageNav.min.js"></script>
	<script type="text/javascript" src="./js/index.js"></script>
	<title>实训在线-咖啡官网</title>
</head>
<body>
		<!-- 导航栏 -->
		<nav id="header" class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a href="#" class="navbar-brand">COFFEE</a>
				</div>
				<div id="navbar" class="collapse navbar-collapse navbar-right">
					<ul class="nav navbar-nav">
						<li class="active nav-lis"><a href="#carousel">HOME</a></li>
						<li class="nav-lis"><a href="#machine">MACHINE</a></li>
						<li class="nav-lis"><a href="#hot">PRODUCTS</a></li>
						<li class="nav-lis"><a href="#address">SHOP</a></li>
						<li class="nav-lis"><a href="#footer">ABOUT</a></li>
						<li class="nav-lis"><a href="#footer">CONTACT</a></li>
					</ul>
				</div>
			</div>
		</nav>
		<!-- 导航栏结束 -->

		<!-- 轮播图 -->
		<section class="carousel slide" id="carousel">
			<ol class="carousel-indicators">
				<li data-target="#carousel" data-slide-to="0" class="active"></li>
				<li data-target="#carousel" data-slide-to="1"></li>
				<li data-target="#carousel" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="item active">
					<img src="./images/coffee1.jpg" alt="" class="img-responsive" />
					<div class="carousel-caption">
						<h1>IDEA  &  DREAM</h1>
					</div>
				</div>
				<div class="item">
					<img src="./images/coffee2.jpg" alt="" class="img-responsive" />
					<div class="carousel-caption">
						<h1>IDEA  &  DREAM</h1>
					</div>
				</div>
				<div class="item">
					<img src="./images/coffee3.jpg" alt="" class="img-responsive" />
					<div class="carousel-caption">
						<h1>IDEA  &  DREAM</h1>
					</div>
				</div>
			</div>
		</section>

		<!-- 咖啡机器 -->
		<section id="machine">
			<div class="col-md-3"></div>
			<div class="machine col-md-6" >
				<div class="changeImg col-sm-6">
					<div class="machineImg col-md-12">
						<ul class="list-unstyled ">
							<li><img src="./images/machine1.jpg" alt="ONE" class="img-responsive" /></li>
							<li><img src="./images/machine2.jpg" alt="TWO" class="img-responsive"/></li>
							<li><img src="./images/machine3.jpg" alt="THREE" class="img-responsive" /></li>
						</ul>
					</div>
					<a href="#" class="dir dirl checked" >&lt;</a>
					<a href="#" class="dir dirr">&gt;</a>
				</div>
				<div class="machineText col-sm-6">
					<div class="col-md-12"><p>COFFEE</p></div>
					<div class="col-md-12"><p>MACHINE&nbsp;&nbsp;&nbsp;<span>ONE</span></p></div>	
					<div class="col-md-12">Superb&nbsp;&nbsp;&nbsp;Features&nbsp;&nbsp;&nbsp;Amazing</div>
					<div class="col-md-12">Roasts</div>
				</div>
			</div>
			<div class="col-md-3"></div>
		</section>
		<!-- 咖啡机器结束  -->

		<!-- 咖啡图片 -->
		<section id="coffeeImg">
			<div class="imgBg">
				<div class="container">
					<div class="col-md-12"><h3>COFFEE</h3></div>
					<div class="col-sm-2"></div>
					<div class="col-md-12"><p>We Deeply Understand the Importance of Production for You.</p></div>
					<div class="col-md-12">
						<p>Once it is Stopped. You can't deliever goods in Time. And it has Possibility to Suffer the claim</p>
					</div>
					<div class="col-md-12"><p>of Breaking a Contact.</p></div>
				</div>
			</div>
		</section>
		<!-- 咖啡图片结束 -->

		<!-- LIST -->
		<section id="productList">
				<dl class="col-sm-1">
					<dt><img src="./images/list1.jpg" alt="" class="img-responsive" /></dt>
					<dd>浓缩咖啡系列</dd>
					<dd>ESPRESSO COFFEE</dd>
				</dl>
				<dl class="col-sm-1">
					<dt><img src="./images/list1.jpg" alt="" class="img-responsive"/></dt>
					<dd>经典咖啡系列</dd>
					<dd>CLASSIC OFFEE</dd>
				</dl>
				<dl class="col-sm-1">
					<dt><img src="./images/list1.jpg" alt="" class="img-responsive"/></dt>
					<dd>LATTEE系列</dd>
					<dd>NO COFFEE DRINK</dd>
				</dl>
				<dl class="col-sm-1">
					<dt><img src="./images/list1.jpg" alt="" class="img-responsive"/></dt>
					<dd>浓缩咖啡系列</dd>
					<dd>ESPRESO COFFEE</dd>
				</dl>
				<dl class="col-sm-1">
					<dt><img src="./images/list1.jpg" alt="" class="img-responsive"/></dt>
					<dd>冰咖啡系列</dd>
					<dd>ICED COFFEE</dd>
				</dl>
				<div class="col-sm-3"><img src="./images/list.jpg" alt="" class="img-responsive"/></div>
				<dl class="col-sm-1">
					<dt><img src="./images/list2.jpg" alt="" class="img-responsive"/></dt>
					<dd>茶系列</dd>
					<dd>TEA</dd>
				</dl>
				<dl class="col-sm-1">
					<dt><img src="./images/list3.jpg" alt="" class="img-responsive"/></dt>
					<dd>轻食系列</dd>
					<dd>FOOD</dd>
				</dl>
				<dl class="col-sm-1">
					<dt><img src="./images/list4.jpg" alt="" class="img-responsive"/></dt>
					<dd>盈冰乐系列</dd>
					<dd>FRAPPUCCINO</dd>
				</dl>
				<dl class="col-sm-1">
					<dt><img src="./images/list5.jpg" alt="" class="img-responsive"/></dt>
					<dd>其它系列</dd>
					<dd>OTHER DRINKS</dd>
				</dl>
			</section>
		<!-- LIST结束 -->
 
		<!-- HOT -->
		<section id="hot">
			<div class="container">
				<div class="col-xs-12"><h1>爆款推荐</h1></div>
				<hr />
				<div class="col-sm-3 recommend">
					<h2>RECOMMEND</h2>
					<p>Super Feauters Amazing </p>
					<p>Roasts</p>
				</div>
				<div class="col-sm-3 hotImg">
					<dl>
						<dt><img src="./images/moca.jpg" alt="" /></dt>
						<dd>摩卡咖啡</dd>
						<dd>由意大利浓缩咖啡、巧克力酱、鲜奶油和牛奶混合而成，摩卡得名于有名的摩卡港。</dd>
					</dl>
				</div>
				<div class="col-sm-3 hotImg">
					<dl>
						<dt><img src="./images/naTie.jpg" alt="" /></dt>
						<dd>冰拿铁</dd>
						<dd>是意大利浓缩咖啡与牛奶的混合，而且牛奶多而咖啡少是拿铁咖啡的特点，是花式咖啡的一种。</dd>
					</dl>
				</div>
				<div class="col-sm-3 hotImg">
					<dl>
						<dt><img src="./images/redNa.jpg" alt="" /></dt>
						<dd>红茶拿铁</dd>
						<dd>与水果拿铁类似，是由红茶提取物与牛奶以1：4的比例混合调制而成，味道醇厚清香，是一种非常健康的饮品。</dd>
					</dl>
				</div>
			</div>
		</section>
		<!-- HOT结束 -->
		
		<!-- address -->
		<section id="address">
			<div class="container">
				<div class="page-header"><h1>门店分布</h1></div>
				<div class="address-body">
					<div class="col-md-3 col-sm-6">
						<dl>
							<dt><img src="./images/shop1.jpg" alt="" class="img-responsive"/></dt>
							<dd>COFFEE SHOP ONE</dd>
							<dd>咖啡店1的地址</dd>
						</dl>
						<a href="javascript:"></a>
					</div>
					<div class="col-md-3 col-sm-6">
						<dl>
							<dt><img src="./images/shop2.jpg" alt="" class="img-responsive" /></dt>
							<dd>COFFEE SHOP TWO</dd>
							<dd>咖啡店2的地址</dd>
						</dl>
						<a href="javascript:"></a>
					</div>
					<div class="col-md-3 col-sm-6">
						<dl>
							<dt><img src="./images/shop3.jpg" alt="" class="img-responsive" /></dt>
							<dd>COFFEE SHOP THREE</dd>
							<dd>咖啡店3的地址</dd>
						</dl>
						<a href="javascript:"></a>
					</div>
					<div class="col-md-3 col-sm-6 show">
						<dl>
							<dt><img src="./images/shop4.jpg" alt="" class="img-responsive" /></dt>
							<dd>COFFEE SHOP FOUR</dd>
							<dd>咖啡店4的地址</dd>
						</dl>
						<a href="javascript:"></a>
					</div>
				</div>
			</div>
		</section>
		<!-- address结束 -->

		<!-- PRIVILEGE -->
		<section id="privilege">
			<div>
				<div class="col-md-12"><h4>会员中心</h4></div>
				<div class="col-md-12"><p>MEMBER CENETR</p></div>
			</div>
		</section>
		<!-- PRIVILEGE结束 -->
		
		<!-- ABOUT -->
		<section id="about">
			<div class="col-sm-6 aboutImg"><img src="./images/drink.jpg" alt="" class="img-responsive" /></div>
			<div class="col-sm-6 col-xs-12 aboutText">
				<h1>关于我们</h1>
				<hr>
				<p>
					Our Coffee brand aims to achieve a set of people, Chi Chi, and jointly build a resource integration, play a remarkable efficiency of the coffee social platform; coffee is gradually becoming a high-end business elite culture of change, innovators and leaders
				</p>
			</div>
		</section>
		<!-- ABOUT结束 -->

		<!-- FOOTER -->
		<footer id="footer">
			<div class="container">
				<ul class="footerList list-unstyled col-sm-3">
					<li><a href="javascript:">产品家族</a></li>
					<li><a href="javascript:">咖啡机</a></li>
					<li><a href="javascript:">浓臻交响</a></li>
					<li><a href="javascript:">即饮系列</a></li>
					<li><a href="javascript:">礼盒系列</a></li>
					<li><a href="javascript:">醇咖啡系列</a></li>
				</ul>
				<ul class="footerList list-unstyled col-sm-3">
					<li><a href="javascript:">品牌介绍</a></li>
					<li><a href="javascript:">品牌介绍</a></li>
					<li><a href="javascript:">品牌文化</a></li>
					<li><a href="javascript:">品牌视频</a></li>
					<li><a href="javascript:">品牌历程</a></li>
				</ul>
				<ul class="footerList list-unstyled col-sm-3">
					<li><a href="javascript:">产品介绍</a></li>
					<li><a href="javascript:">当季新品</a></li>
					<li><a href="javascript:">当季爆品</a></li>
					<li><a href="javascript:">产品列表</a></li>
					<li><a href="javascript:">最新活动</a></li>
				</ul>
				<ul class="footerList list-unstyled col-sm-3">
					<li><a href="javascript:">会员活动</a></li>
					<li><a href="javascript:">会员权益</a></li>
					<li><a href="javascript:">会员节日</a></li>
					<li><a href="javascript:">联系我们</a></li>
					<li><a href="javascript:">网上留言</a></li>
				</ul>
				<div class="footerText col-sm-12">
					<p>Copyright&nbsp;©&nbsp;2019-2077&nbsp;&nbsp;shixun.online&nbsp;&nbsp;亭ICP备123456789号-1</p>
				</div>
			</div>
		</footer>
		<!-- FOOTER结束 -->
</body>
</html>
